{% if section  and section.type == "footer" %}
{% assign section = section %}
{% else %}
{% assign section = global.sections.footer %}
{% endif %}


{% stylesheet %}
    #footer_box{
        background: var(--footer-bg-color);
        color: var(--footer-font-color);
        position: relative;
        
        border-top:
    }
    #footer_box .footer_link{
        display: flex;
        justify-content: space-between;
        padding: 80px 0 0; 
    }
    #footer_box .footer_link dl{
        width:25%;
    }
    #footer_box .footer_link dt .footer_nav_down{
        display: none;
    }
    #footer_box .footer_link dl:first-child{
        padding-right:20px;
        box-sizing:border-box;
    }
    #footer_box .footer_link dl dt{
        
        margin-bottom: 20px;
        line-height: 30px;
        font-weight: bold;
    }
    #footer_box .footer_link dl dt a{
        color: var(--footer-dt-color);
        line-height:30px;
    }
    #footer_box .footer_link dl dd a{
        color: var(--footer-font-color);
        font-size: 14px;
        line-height:2;
    }


    #footer_box .copyright{
        border-top: 1px solid rgba( 230, 230, 230, .2 );
        padding:30px 0;
        text-align: center;
        margin-top:50px;
    }
    #footer_box .footer_link a{
        display: block;
    }
    #footer_box .footer_link .footer_nav_item{
        padding:5px 0;
    }
    #footer_box .share_link{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }
    #footer_box .share_link a{
        margin-right: 10px;
        margin-bottom: 10px;
    }
    #footer_box .share_link a svg{
        width: 20px;
        margin-right: 5px;
        fill:var(--footer-font-color);
    }
    #footer_box .share_link a span{}
    @media screen and (max-width: 768px) {
        #footer_box .footer_link{
            flex-wrap:wrap;
        }
        #footer_box .footer_link dl{
            width:calc(50% - 30px);
            margin-bottom:30px;
        }
        #footer_box .copyright{
            margin-top:20px;
        }
    }
    @media screen and (max-width: 767px) {
        #footer_box .footer_link{
            padding:50px 0 0;
        }
        #footer_box .footer_link dl{
            width:100%;
        }
        #footer_box .footer_link dl dt{
            margin-bottom: 10px;
        }
    
    }
    
{% endstylesheet %}
<div id="footer_box" style="--footer-bg-color:{{section.settings.bg-color}};--footer-font-color:{{section.settings.font-color}};--footer-dt-color:{{section.settings.dt-font-color}}" class="footer_box">
    <div class="footer_wrapper container_wrapper">
        <div class="footer_link">
            {% if section.settings.nav.id %}
            {% get_nav nav_id={section.settings.nav.id} %}
            {% for item in nav.nav_item %}
            <dl>
                <dt>{% include "nav_a", nav : item  %}</dt>
                {% if item.children %}
                <dd>
                {% for childrenNav in item.children %}
                {% include "nav_a", nav : childrenNav  %}
                {% endfor %}
                </dd>
                {% endif %}
            </dl>
            {% endfor %}
            {% else %}
            <dl>
                <dt>Company Info</dt>
                <dd>
                    <a href="/pages/About-Us">About Us</a>
                    <a href="/pages/Contact-Us">Contact Us</a>
                    <a href="/comments">Customer Reviews</a>
                </dd>
            </dl>
            <dl>
                <dt>Service Center</dt>
                <dd>
                    <a href="/pages/Shipping-policy">Shipping policy</a>
                    <a href="/pages/Return-policy">Return policy</a>
                    <a href="/pages/Terms-of-service">Terms of service</a>
                    <a href="/pages/Privacy-policy">Privacy policy</a>
                </dd>
            </dl>
            <dl>
                <dt>Quick Links</dt>
                <dd>
                    <a href="/search">Search </a>
                    <a href="/account/login">Login</a>
                    <a href="/account/register">Register</a>
                    <a href="/account/trackingorder">Tracking Order</a>
                    <a href="/blogs">Blog</a>
                </dd>
            </dl>
            {% endif %}
            <dl class="footer_con">
                {% if section.settings.nav_title_4 != '' %}<dt>{{section.settings.nav_title_4}}</dt>{% endif %}
                
                <dd class="footer_nav_list">{{section.settings.footer_content2}}</dd>
                <dd>
                    <div class="share_link">
                        {% if section.settings.is_facebook %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_facebook }}">{% include icon_share_facebook ,{width:'24',height:'24'} %}</a>{% endif %}
                        {% if section.settings.is_twitter %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_twitter }}">{% include icon_share_twitter ,{width:'24',height:'24'} %}</a>{% endif %}
                        {% if section.settings.is_pinterest %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_pinterest }}">{% include icon_share_pinterest ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_instagram %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_instagram }}">{% include icon_share_instagram ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_snapchat %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_snapchat }}">{% include icon_share_snapchat ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_tiktok %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_tiktok }}">{% include icon_share_tiktok ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_tumblr %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_tumblr }}">{% include icon_share_tumblr ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_linkedin %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_linkedin }}">{% include icon_share_linkedin ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_youtube %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_youtube }}">{% include icon_share_youtube ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_vimeo %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_vimeo }}">{% include icon_share_vimeo ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_vk %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_vk }}">{% include icon_share_vk ,{width:'24',height:'24'} %}</a> {% endif %}
                        {% if section.settings.is_whatsapp %}<a target="_blank" class="share_icon" href="{{ theme_config.global.sns_link_whatsapp }}">{% include icon_share_whatsapp ,{width:'24',height:'24'} %}</a> {% endif %}
                    </div> 
                </dd>     
            </dl>
        </div>
    
    </div>
    <div class="copyright"><div class="container_wrapper">{{section.settings.copyright}}</div></div>
    
</div>
<script type="text/javascript">
    $('.footer_nav_down').click(function(){
        if($(this).parents('dl').hasClass('dl_on')){
            $(this).parents('dl').removeClass('dl_on');
            $(this).parents('dl').find('.footer_nav_list').slideUp();
        }else{
            $(this).parents('dl').addClass('dl_on');
            $(this).parents('dl').find('.footer_nav_list').slideDown();
        }
        
    })
</script>
{% schema %}
{
    "tag": "footer",
    "class": "footer",
    "is_global": true,
    "name": {
        "zh_CN": "底部"
    },
    "max_blocks": "0",
    "settings": [
        {
            "type": "card_header",
            "label": {
                "zh_CN": "菜单导航设置"
            }
        },
        {
            "type": "card_nav",
            "label": {
                "zh_CN": "选择菜单"
            },
            "default": {
                "id": "",
                "title": ""
            },
            "id": "nav"
        },
        {
            "type": "card_header",
            "label": {
                "zh_CN": "菜单4导航设置"
            }
        },
        {
            "type": "card_input",
            "id": "nav_title_4",
            "label": {
                "zh_CN": "菜单4标题"
            },
            "placeholder": {
                "zh_CN": "请输入标题"
            }
        },
        {
            "type": "card_text_editor",
            "label": {
                "zh_CN": "文本编辑"
            },
            "id": "footer_content2"
        },
        {
            "type": "card_header",
            "label": {
                "zh_CN": "设置"
            }
        },
        {
            "type": "card_color",
            "label": {
                "zh_CN": "背景颜色"
            },
            "id": "bg-color"
        },
        {
            "type": "card_color",
            "label": {
                "zh_CN": "字体颜色"
            },
            "id": "font-color"
        },
        {
            "type": "card_color",
            "label": {
                "zh_CN": "表头颜色"
            },
            "id": "dt-font-color"
        },
        {
            "type": "card_text_editor",
            "label": {
                "zh_CN": "底部版权"
            },
            "id": "copyright"
        },
        {
          "type": "card_header",
          "label": {
            "zh_CN": "SNS账号"
          }
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Facebook"
          },
          "id": "is_facebook"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Twitter"
          },
          "id": "is_twitter"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Pinterest"
          },
          "id": "is_pinterest"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Instagram"
          },
          "id": "is_instagram"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Snapchat"
          },
          "id": "is_snapchat"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Tiktok"
          },
          "id": "is_tiktok"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Tumblr"
          },
          "id": "is_tumblr"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Linkedin"
          },
          "id": "is_linkedin"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Youtube"
          },
          "id": "is_youtube"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Vimeo"
          },
          "id": "is_vimeo"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "VK"
          },
          "id": "is_vk"
        },
        {
          "type": "card_switch",
          "label": {
            "zh_CN": "Whatsapp"
          },
          "id": "is_whatsapp"
        }
    ],
    "blocks": [],
    "default": {
        "settings": {
            "nav_title_1":"About us",
            "settings": {
                "nav1": {
                    "id": "",
                    "title": ""
                }
            },
            "nav_title_2":"Customer Support",
            "settings": {
                "nav2": {
                    "id": "",
                    "title": ""
                }
            },
            "nav_title_3":"Support",
            "settings": {
                "nav2": {
                    "id": "",
                    "title": ""
                }
            },
            "nav_title_4":"Contact",
            "footer_content2":"Phone: 1-234-567-999<br>Email: xxx@xxx.com<br>Working hours from 8AM – 18AM EST",  
            "bg-color": "#000000",
            "font-color": "#FFFFFF",
            "dt-font-color": "#FFFFFF",
            "copyright": "SHOP INC. All Rights Reserved.",
            "is_facebook": true,
            "is_twitter": true,
            "is_pinterest": true,
            "is_instagram": false,
            "is_snapchat": false,
            "is_tiktok": false,
            "is_tumblr": false,
            "is_linkedin": false,
            "is_youtube": false,
            "is_vimeo": false,
            "is_vk": false,
            "is_whatsapp": false
        },
        "blocks": []
    }
}
{% endschema %}